<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>随机色+全选</title>
	<style type="text/css">
		*{margin:0;padding:0;}
		a{text-decoration: none;}
		table{
			width: 500px;
			border: 1px solid #d6a2c6;
			margin:100px auto;
			text-align: center;
			border-collapse: collapse;
		}
		th,td{
			border: 1px solid #d6a2c6;
		}
		tr{
			height: 50px;
		}
	</style>
</head>
<body>
	<div>
		<table>
			<thead>
				<tr>
					<th><input type="checkbox" name="lister" onclick="checkAll()">全选</th>
					<th>标题</th>
					<th>状态</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><input type="checkbox" name="list"></td>
					<td>邮件</td>
					<td><a href="#">未读</a></td>
				</tr>
				<tr>
					<td><input type="checkbox" name="list"></td>
					<td>邮件</td>
					<td><a href="#">未读</a></td>
				</tr>
				<tr>
					<td><input type="checkbox" name="list"></td>
					<td>邮件</td>
					<td><a href="#">未读</a></td>
				</tr>
				<tr>
					<td><input type="checkbox" name="list"></td>
					<td>邮件</td>
					<td><a href="#">未读</a></td>
				</tr>
				<tr>
					<td><input type="checkbox" name="list"></td>
					<td>邮件</td>
					<td><a href="#">未读</a></td>
				</tr>
		</table>
	</div>
	<script type="text/javascript">
		function checkAll()
		{
			var obj = document.getElementsByName("list");
			var obj_1 = document.getElementsByName("lister");
			for(var key in obj)
			{
				if(obj_1[0].checked)
				{
					obj[key].checked = true;
				}else
				{
					obj[key].checked = false;
				}
			}
		}
		function beijingColor()
		{
			var bg = document.getElementsByTagName('tbody')[0].getElementsByTagName('tr')
			// document.getElementsByTagName('tbody')[0].getElementsByTagName('tr')
			for(var i=0;i<bg.length;i++)
			{
				if(i % 2)
				{
					bg[i].style.background = "#93DD43";
				}else
				{
					bg[i].style.background = "#66D9D0";
				}
			}
		}
		beijingColor();
	</script>
</body>
</html>